<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="pc/include :: header('我的收益')" />

    <link th:href="@{/js/ui-table/ui-table.css}" rel="stylesheet"/>
</head>
<body>
<th:block th:include="pc/include :: top" />
<div class="iw">
    <div class="crumbs">
        <p>当前位置：<a href="/">首页</a> > 我的订单</p>
    </div>
    <div class="center_left">
        <th:block th:include="pc/include :: menu" />
    </div>
    <div class="center_right">
        <th:block th:include="pc/include :: menuheader" />
        <div class="task_head">
            <ul>
                <li id="li1" class="active">VIP订单</li>
                <li id="li2">充值订单</li>
                <li id="li3">提现记录</li>
            </ul>
            <div class="line"></div>
        </div>
        <div class="tab_order_vip">
        </div>
        <div class="tab_order_glod" style="display: none">
        </div>
        <div class="tab_order_cash" style="display: none">
        </div>
    </div>
</div>
<th:block th:include="pc/include :: footer" />

<script th:src="@{/js/ui_stable/ui_stable.js}"></script>
<script>
    $(function () {
        $("#li1").click(function () {
            $(this).parent().find("li").removeClass("active");
            $("#li1").addClass("active");
            $(".line").css("left", "8px");
            $(".tab_order_vip").show();
            $(".tab_order_glod").hide();
            $(".tab_order_cash").hide();
        });

        $("#li2").click(function () {
            $(this).parent().find("li").removeClass("active");
            $("#li2").addClass("active");
            $(".line").css("left", "138px");
            $(".tab_order_vip").hide();
            $(".tab_order_glod").show();
            $(".tab_order_cash").hide();
        });

        $("#li3").click(function () {
            $(this).parent().find("li").removeClass("active");
            $("#li3").addClass("active");
            $(".line").css("left", "268px");
            $(".tab_order_vip").hide();
            $(".tab_order_glod").hide();
            $(".tab_order_cash").show();
        });
    });

    var url = "/user/order_vip";
    var opts = {
        pagesize: 20,
        pageNum: 1
    };
    var setting = {
        header: '<td d="orderid" style="min-width:100px;">订单ID</td>' +
                '<td d="title" style="min-width:60px;">标题</td>' +
                '<td d="cash" style="min-width:60px;">付款金额</td>' +
                '<td d="days" style="min-width:60px;">天数</td>' +
                '<td d="from" style="min-width:60px;">付款渠道</td>' +
                '<td d="insertdate" style="min-width:60px;">订单日期</td>' +
                '<td d="state" style="min-width:60px;">状态</td>',

        body: '<td>#orderid</td>' +
                '<td>#title</td>' +
                '<td>¥ #cash</td>' +
                '<td>#vipdays 天</td>' +
                '<td>#fstr</td>' +
                '<td>#insertdate</td>' +
                '<td>#sstr</td>'
    };
    $(".tab_order_vip").ui_stable(url, opts, setting);

    var url2 = "/user/order_glod";
    var opts2 = {
        pagesize: 20,
        pagecurrent: 1
    };
    var setting2 = {
        header: '<td d="orderid" style="min-width:100px;">订单ID</td>' +
                '<td d="title" style="min-width:60px;">标题</td>' +
                '<td d="cash" style="min-width:60px;">付款金额</td>' +
                '<td d="glods" style="min-width:60px;">充值数量</td>' +
                '<td d="from" style="min-width:60px;">付款渠道</td>' +
                '<td d="insertdate" style="min-width:60px;">订单日期</td>' +
                '<td d="state" style="min-width:60px;">状态</td>',

        body: '<td>#orderid</td>' +
                '<td>#title</td>' +
                '<td>¥ #cash</td>' +
                '<td>#glods 个</td>' +
                '<td>#fstr</td>' +
                '<td>#insertdate</td>' +
                '<td>#sstr</td>'
    };
    $(".tab_order_glod").ui_stable(url2, opts2, setting2);

    var url3 = "/user/order_cash";
    var opts3 = {
        pagesize: 20,
        pagecurrent: 1
    };
    var setting3 = {
        header: '<td d="title" style="min-width:60px;">标题</td>' +
                '<td d="cash" style="min-width:60px;">提现金额</td>' +
                '<td d="from" style="min-width:60px;">提现渠道</td>' +
                '<td d="account" style="min-width:60px;">提现账号</td>' +
                '<td d="insertdate" style="min-width:60px;">提现日期</td>' +
                '<td d="tradeno"  style="min-width:60px;">付款单号</td>' +
                '<td d="tradecash" style="min-width:60px;">应付金额(扣分成)</td>' +
                '<td d="tradedate" style="min-width:60px;">付款日期</td>' +
                '<td d="tradedesc" style="min-width:60px;">备注</td>' +
                '<td d="tradestate" style="min-width:60px;">付款标识</td>' +
                '<td d="state" style="min-width:60px;">状态</td>',

        body: '<td>#title</td>' +
                '<td>¥ #cash(扣#glods个¥)</td>' +
                '<td>#fstr</td>' +
                '<td>#account</td>' +
                '<td>#insertdate</td>' +
                '<td>#tradeno</td>' +
                '<td>¥ #tradecash</td>' +
                '<td>#tradedate</td>' +
                '<td>#tradedesc</td>' +
                '<td>#tstr</td>'+
                '<td>#sstr</td>'
    };
    $(".tab_order_cash").ui_stable(url3, opts3, setting3);
</script>